LOGICIELS
ActionScript > Menu à boutons - accès à 2 scènes
par : gwenola
Menu à 2 boutons donnant accès à 2 scènes différentes
(d’après un exercice de Bertrand Gilles - Technocité)
1. Dans un nouveau document Flash, ouvrez l’Inspecteur des propriétés s’il n’est pas visible (menu Window > Properties). Via ce panneau, définissez :
La
taille de la scène principale : cliquez sur le bouton du champ
Size et dans les champs Largeur (Width) et Hauteur (Heigth), entrez 600
et 400 pixels.
La
couleur de fond du document : cliquez sur le carré blanc du champ
Background Color pour choisir librement une autre couleur.
2. Sur la scène principale, créez un carré sans contour à partir de l’outil Rectangle . Via l’Inspecteur des propriétés, redéfinissez sa taille à 96 x 96 px, et disposez-le aux coordonnées : X 109.0 et Y 280.0.
Convertissez cette forme en bouton : menu Modify > Convert to Symbol (ou raccourci clavier : F8) > Button. Nommez-le Bt_Carré.
3. Créez un nouveau calque : cliquez sur le bouton Insérer Calque en bas de la liste des calques. Nommez-le Rond. Puis tracez une ellipse sans contour . Via l’Inspecteur des propriétés, définissez la taille à 101.0 px de côté, et disposez la forme aux coordonnées : X 108.5 et Y 120.5. Convertissez le rond en bouton nommé Bt_Rond.
4. Sur un nouveau calque nommé Menu, activez l’outil Texte et tapez MENU. Via l’Inspecteur des propriétés :
Changez librement la police de caractère (champ A) ;
Définissez la taille à 75 ;
Changez librement la couleur en cliquant sur le petit carré de couleur ;
Assurez-vous que le mode de texte est bien défini à Static Text (à gauche dans l’Inspecteur des propriétés) ;
Positionnez le texte à X 400.0 et Y 115.0 px.
5. Ouvrez la palette des Séquences : menu Window > Design Panels > Scene.
Créez une nouvelle séquence en cliquant sur le bouton Ajouter Séquence en bas de la palette.
Sur la scène de la nouvelle séquence, créez une interpolation de Forme guidée :
A l’image 1, créez une ellipse rouge. Convertissez-la en Movie Clip (raccourci clavier : F8).
Double
cliquez sur le Movie Clip pour rentrer dans son propre scénario et
créez une image clé vide à l’image 20 (raccourci clavier : F7). A
cette image, à l’emplacement de l’ellipse, tracez une étoile
bleue :
tracez un rectangle puis, avec la flèche Noire, ajoutez des coins au rectangle : enfoncez Alt, cliquez au milieu d’un bord, et en maintenant Alt enfoncé, faites glisser. Ajustez ensuite les pointes de l’étoile avec la flèche Noire toujours.
Cliquez
entre les 2 images dans la ligne du temps et, via l’Inspecteur des
propriétés, appliquez une interpolation de Forme (Tween > Shape).
Retournez sur la scène principale en cliquant sur le bouton Scene 2 en
haut à gauche de la liste des calques (figure ci-contre).
Créez un image clé (F6) à l’image 20.
Créez un guide pour animer le Movie Clip :
- Cliquez sur le bouton Ajouter Guide de Mouvement en bas de la liste des calques.
- Avec l’outil Crayon , défini en Contour Noir et en mode Lissage, tracez un zigzag traversant la scène.
- Sélectionnez l’image clé 20 du Movie Clip et positionnez le centre de celui-ci, sur la scène, à une extrémité du tracé.
- De même, centrez le Movie Clip de l’image 1 à l’autre extrémité du tracé.
- Cliquez entre les 2 images clés du calque du Movie Clip et via l’Inspecteur des propriétés, appliquez une interpolation de Mouvement (Tween > Motion).
6. Dans la palette Séquences, créez une 3eme séquence. Sur la nouvelle scène, créez une interpolation de mouvement guidée :
Créez une forme librement à l’aide des divers outils de conception graphique de la barre d’outil.
Convertissez la forme en Symbole Graphique (F8).
Créez
une image clé (F6) à l’image 20. Déplacez le symbole de cette image sur
la scène. Via l’Inspecteur des propriétés, changez sa luminosité :
Color > Brightness. Puis avec l’outil Transformation , changez sa
taille et son inclinaison.
Créez un guide de mouvement et tracez, au Crayon Noir, une spirale dans le calque correspondant.
Centrez les 2 symboles de la scène aux deux extrémités de la spirale.
Cliquez
entre les 2 images clés du calque aux symboles et via l’Inspecteur des
propriétés, appliquez une interpolation de Mouvement (Tween >
Motion).
Au-dessus du guide, créez un nouveau calque. Nommez-le Bouton. Créez une image clé vide (F7) à l’image 20.
Dessinez
une forme de maison à partir d’un rectangle sans contour que vous
déformerez (comme décrit ci-dessus pour l’étoile) avec la flèche Noire
à cette image 20.
Convertissez la forme en Bouton (F8).
Prévisualisez l’ensemble de l’animation : Ctrl/Pomme+Enter.
7. Reste à placer un certain nombre d’actions, temporelles et liées aux boutons, pour contrôler le déroulement de l’animation.
Dans la palette Séquences, cliquez sur Scene 1 :
- Dans cette séquence, au-dessus du calque Menu, créez un nouveau calque et nommez-le Actions. Puis ouvrez le panneau des Actions en cliquant sur le bouton fléché de l’Inspecteur des propriétés.
- Tapez le code suivant :
Ainsi, la tête de lecture du fichier reste bloquée à la 1re image de l’animation (c-à-d. au menu).
- Cliquez sur le bouton Rond et entrez le code suivant :
Ainsi, en cliquant sur ce bouton, on accède à la séquence 2. (Si vous travaillez dans une version Flash en français, le terme Scene par défaut est remplacé par Séquence. Donc au lieu de taper “Scene 2” dans le code tapez “Séquence 2”).
- Cliquez sur le bouton Carré et entrez le code suivant :
Ainsi, en cliquant sur ce bouton, on accède à la séquence 3.
8. Dans la palette Séquences, cliquez sur Scene 2 :
- Créez un nouveau calque au-dessus du guide de mouvement. Nommez-le Actions.
- Créez une image clé vide (F7) à l’image 20 dans ce nouveau calque, puis entrez le code suivant :
Ainsi, à la fin de l’animation de la séquence 2, on retourne automatiquement au menu.
9. Dans la palette Séquences, cliquez sur Scene 3 :
- Créez un nouveau calque nommé Actions au-dessus du calque Bouton. Créez une image clé vide à l’image 20 dans ce calque, puis entrez le code suivant :
Ainsi, l’animation s’arrête à la dernière image de la séquence 3.
- Sélectionnez le Bouton en forme de maison sur la scène, et entrez le code suivant :
Ainsi, en cliquant sur ce bouton, on retourne au menu.
- Prévisualisez le résultat : Ctrl/Pomme+Enter.

